<!DOCTYPE html>
<html lang="en"; xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-inline">
					<input type="text" name="userName" placeholder="" class="layui-input">
				</div>
				<label class="layui-form-label">账号:</label>
				<div class="layui-input-inline">
					<input type="text" name="userCode" placeholder="" class="layui-input">
				</div>
				<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
					<i class="layui-icon layui-icon-search"></i>
					查询
				</button>
				<button type="reset" class="pear-btn pear-btn-md">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</div>
<!--修改-->
<div id="update" style="display: none" class="layui-form-item">
	<form class="layui-form" lay-filter="updateForm"  action="" method="post" onsubmit="return false">
		<input type="hidden" name="id" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" width="300px">
		<div class="layui-form-item" style="width: 400px;margin-top: 50px;margin-left: 25px">
			<label class="layui-form-label">角色:</label>
			<div class="layui-input-block">
				<select name="roleId" lay-verify="service" lay-search id="service">

				</select>
			</div>
		</div>
			<div class="layui-form-item" style="width: 400px;margin-left: 25px">
				<label class="layui-form-label">登录账号:</label>
				<div class="layui-input-block">
					<input type="text" name="userCode" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" width="300px">
				</div>
			</div>
			<div class="layui-form-item" style="width: 400px;margin-left: 25px">
				<label class="layui-form-label">用户名称:</label>
				<div class="layui-input-block">
					<input type="text" name="userName" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="width: 400px;margin-left: 25px">
				<label class="layui-form-label">入职时间:</label>
				<div class="layui-input-block">
					<input type="text" name="entryDate" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="width: 400px;margin-left: 25px">
				<label class="layui-form-label">离职时间</label>
				<div class="layui-input-block">
					<input type="text" name="dimissionDate" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
				</div>
			</div>

		</form>
</div>
<!--添加-->
<div id="add" style="display: none" class="layui-form-item">
	<form class="layui-form" lay-filter="addForm"  action="" method="post" onsubmit="return false">
		<!--<input type="hidden" name="id" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" width="300px">-->
		<div class="layui-form-item" style="width: 400px;margin-top: 50px;margin-left: 25px">
			<label class="layui-form-label">角色:</label>
			<div class="layui-input-block">
				<select name="roleId" lay-verify="service" lay-search id="service2">

				</select>
			</div>
		</div>
		<div class="layui-form-item" style="width: 400px;margin-left: 25px">
			<label class="layui-form-label">登录账号:</label>
			<div class="layui-input-block">
				<input type="text" name="userCode" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" width="300px">
			</div>
		</div>
		<div class="layui-form-item" style="width: 400px;margin-left: 25px">
			<label class="layui-form-label">用户名称:</label>
			<div class="layui-input-block">
				<input type="text" name="userName" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" style="width: 400px;margin-left: 25px">
			<label class="layui-form-label">用户密码:</label>
			<div class="layui-input-block">
				<input type="text" name="userPassword" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" style="width: 400px;margin-left: 25px">
			<label class="layui-form-label">创建者:</label>
			<div class="layui-input-block">
				<input type="text" name="createdBy" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input  layui-disabled" th:value="${session.loginUser.userName}">
			</div>
		</div>
		<div class="layui-form-item" style="width: 400px;margin-left: 25px">
			<label class="layui-form-label">注册时间:</label>
			<div class="layui-input-block">
				<input type="text" name="creationTime" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input layui-disabled" th:value="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}">
			</div>
		</div>
	</form>
</div>
<script type="text/html" id="user-toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增用户
	</button>
	<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		<i class="layui-icon layui-icon-delete"></i>
		删除用户
	</button>
</script>

<script type="text/html" id="user-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
	<button class="pear-btn pear-btn-sm" id="more{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>

<script type="text/html" id="user-enable">
	{{#  if(d.id == "1"){  }}
	<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{d.userStatus=="1"?"checked":""}} disabled>
	{{# }else{ }}
	<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{d.userStatus=="1"?"checked":""}}>
	{{# } }}
</script>

<script type="text/html" id="user-sex">
	{{#if (d.sex == 1) { }}
	<span>男</span>
	{{# }else if(d.sex == 2){ }}
	<span>女</span>
	{{# } }}
</script>

<script type="text/html" id="user-login">
	{{#if (d.login == 0) { }}
	<span>在线</span>
	{{# }else if(d.sex == 1){ }}
	<span>离线</span>
	{{# } }}
</script>

<script type="text/html" id="user-createTime">
	{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<script type="text/plain" id="moreTool">
		[
		[{txt: "Progerss", event: "progress"}]
		[{txt: "Resolve", event: "resolve"}]
		[{txt: "Reopen", event: "reopen"}]
		[{txt: "Close", event: "close"}]
		]
</script>

<div class="layer-top">
	<br />
	<!--<h3 >上侧弹层内容...</h3>-->
</div>
<script type="text/html" id="bbb">
	{{d.psRole.roleName}}
</script>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
	layui.use(['table', 'form', 'jquery','drawer','dropdown'], function() {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let drawer = layui.drawer;
		let dropdown = layui.dropdown;
		let MODULE_PATH = "/system/user/";
		let cols = [
					[ {
						type: 'checkbox'
					},
						{
							title: 'id',
							field: 'id',
							align: 'center',
							width: 100
						},
						{
							title: '用户账号',
							field: 'userCode',
							align: 'center',
							width: 100
						},
						{   title: '用户名称',
							field: 'userName',
							align: 'center'
						},
						{   title: '角色',
							// field: 'roleId',
							align: 'center',
							width: 80,
							templet:"#bbb"
						},
						{   title: '邮箱',
							field: 'email',
							align: 'center'
						},
						{   title: '最后登录时间',
							field: 'lastLoginTime',
							align: 'center'
						},
						{   title: '状态（正常/冻结）',
							field: 'userStatus',
							align: 'center',
							templet:"#user-enable"
						},
						{   title: '操作',
							toolbar: '#user-bar',
							align: 'left',
							width: 170
						}
					]
				]
		table.render({
			elem: '#user-table',
			url: '/xiTongGuAnLi/ChaYongHu',
			page: true,
			cols: cols,
			skin: 'line',
			toolbar: '#user-toolbar',
			defaultToolbar: [{
				layEvent: 'refresh',
				icon: 'layui-icon-refresh',
			}, 'filter', 'print', 'exports'],
			page:{
				limit:3,
				limits:[3,6,9]},
			done: function (res) {
				for (var i = 0; i < res.data.length; i++) {
					// if (res.data[i].id == "5" || res.data[i].id == "8") {
					// 	$("#more" + res.data[i].id).hide();
					// 	continue;
					// }

					dropdown.suite("#more" + res.data[i].id, {
						align:'left',
						data: res.data[i],
						templateMenu: "moreTool",
					});
				}
			}
		});

		table.on('tool(user-table)', function(obj) {
			if (obj.event === 'remove') {
				// alert("删除")
				window.remove(obj);
			} else if (obj.event === 'edit') {
				// alert("修改")
				window.edit(obj);
			} else if (obj.event === "progress") {
				layer.msg(obj.event);
			} else if (obj.event === "resolve") {
				layer.msg(obj.event);
			} else if (obj.event === "reopen") {
				layer.msg(obj.event);
			} else if (obj.event === "close") {
				layer.msg(obj.event);
			}
		});

		table.on('toolbar(user-table)', function(obj) {
			if (obj.event === 'add') {
				window.add();
			} else if (obj.event === 'refresh') {
				window.refresh();
			} else if (obj.event === 'batchRemove') {
				window.batchRemove(obj);
			}
		});

		form.on('submit(user-query)', function(data) {
			console.log(data.field)
			table.reload('user-table', {
				where: data.field
			})
			return false;
		});

		form.on('switch(user-enable)', function(obj) {
			// layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
			if(obj.value=="1"){
				layer.msg("当前账号为最高级别账号不能被禁用",{icon:6})
				return;
			}
			$.post("/xiTongGuAnLi/XiuGaiYongHuZhuAngTai",{"id":obj.value,"zhuAngTai":obj.elem.checked},
					function (data) {
                        if(data.msg=="状态修改成功"){
							layer.msg(data.msg,{icon:6})
						}else {
							layer.msg(data.msg,{icon:5})
						}
			        }
			)

			})
        //添加用户功能
		window.add = function() {
			//查询角色赋值
			$.ajax({
				url:"/xiTongGuAnLi/ChaXunJueSe",
				dataType:'json',
				type:"post",
				async: false,
				success: function(data) {
					if (data!== null) {
						$("#service2").empty();
						// $("#service").append(new Option("--请选择--","0"));
						$.each(data, function(index, item) {
							$('#service2').append(new Option(item.roleName,item.id));
						});
					} else {
						$("#service2").append(new Option("暂无数据",""));
					}//重新渲染
				}
			});
			form.render("select");
			layer.open({
				type:1,
				title:"增加用户",
				area:["500px","500px"],
				btn:["确定","取消"],
				content:$("#add"),
				yes(){
					let params=layui.form.val("addForm");
					console.log(params)
					$.ajax({
							url:"/xiTongGuAnLi/XinZengYongHu",
							dataType:'json',
							type:"post",
							data:JSON.stringify(params),
						    contentType:'application/json;charset=utf-8',
							success: function(data) {
								layer.close(layer.index);

								layer.msg(data.msg);
							}
						});
					layui.table.reload("user-table");
				}
			})
		}

		window.edit = function(obj) {
			//查询角色赋值
			$.ajax({
				url:"/xiTongGuAnLi/ChaXunJueSe",
				dataType:'json',
				type:"post",
				async: false,
				success: function(data) {
					if (data!== null) {
						$("#service").empty();
						// $("#service").append(new Option("--请选择--","0"));
						$.each(data, function(index, item) {
							$('#service').append(new Option(item.roleName,item.id));
						});
					} else {
						$("#service").append(new Option("暂无数据",""));
					}
					//重新渲染
				}
			});
			form.render("select");
			console.log(obj)
			$("#service").val(obj.data.psRole.id)
			layui.use(['form'], () => {
				let form = layui.form
				form.val("updateForm",obj.data);
				form.render();
			});
			//打开弹窗
			layer.open({
				type:1,
				title:"修改用户",
				area:["500px","500px"],
				btn:["确定","取消"],
				content:$("#update"),
				yes(){
					let params=layui.form.val("updateForm");
					console.log(params)
					$.post("/xiTongGuAnLi/XiuGaiYongHuXinXi",params)
							.done(({msg})=>{
								layer.close(layer.index);
								layui.table.reload("user-table");
								layer.msg(msg);
					})
				}
			})
		}

		window.remove = function(obj) {
			layer.confirm('确定要删除该用户吗？？？', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url:"/xiTongGuAnLi/ShanChuYongHu",
					dataType:'json',
					type:"post",
					data:{"id":obj.data.id},
					success: function(result) {
						layer.close(loading);
						if (result.success) {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							},function() {
								obj.del();
								layui.table.reload("user-table",{
									page:{
										curr: 1 //重新从第 1 页开始
									}
								});
							});
						} else {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							});
						}
						layui.table.reload("user-table",{
							page:{
								curr: 1 //重新从第 1 页开始
							}
						});
					}
				})
			});
		}

		window.batchRemove = function(obj) {
			let data = table.checkStatus(obj.config.id).data;
			if (data.length === 0) {
				layer.msg("未选中数据", {
					icon: 3,
					time: 1000
				});
				return false;
			}
			let ids = "";
			for (let i = 0; i < data.length; i++) {
				ids += data[i].userId + ",";
			}
			ids = ids.substr(0, ids.length - 1);
			layer.confirm('确定要删除这些用户', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: MODULE_PATH + "batchRemove/" + ids,
					dataType: 'json',
					type: 'delete',
					data:{"id":chan},
					success: function(result) {
						layer.close(loading);
						if (result.success) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								table.reload('user-table');
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
			});
		}

		window.refresh = function(param) {
			table.reload('user-table');
		};

	})
</script>
</body>
</html>
